<template>
  <div class="batch-report">
    <div v-if="!data" class="">
      <el-upload
        action=""
        accept=".xlsx"
        :http-request="
          (file) => {
            uploadFile(file);
          }
        "
        class="upload-demo"
      >
        <el-button icon="el-icon-upload" size="small" type="primary">点击上传</el-button>
        <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
        <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
      <a class="down-text" href="/批量上报模版.xlsx" download>下载批量上报excel模版</a>
      <div style="text-align: center; margin-top: 10px">
        <el-button @click="$emit('cancel')">取 消</el-button>
        <el-button type="primary" @click="reportConfirm">确定上传</el-button>
      </div>
    </div>
    <div v-else style="margin: 15px 0">
      <el-alert :title="`上报成功，新增${data.successNums}条资产，去重${data.repeatNums}条资产`" type="success">
      </el-alert>
      <!-- <el-alert title="成功提示的文案" type="warning"> </el-alert> -->
      <el-alert v-if="data && data.failNums > 0" style="margin-top: 10px" :title="data.failInfo" type="error">
      </el-alert>
      <div style="text-align: center; margin-top: 10px">
        <el-button @click="$emit('cancel')" style="" type="primary">关闭弹框</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadTemplateApi, uploadApi } from "api/propertyManage";
export default {
  name: "batchReport",
  props: {},
  components: {},
  data() {
    return {
      data: null,
      formData: null,
    };
  },
  computed: {},
  mounted() {},
  methods: {
    // downTemplate() {},
    reportConfirm() {
      uploadApi(this.formData).then((res) => {
        console.log("res", res);
        this.data = res.data;
        if (this.data.failNums > 0) {
          let failList = this.data.failList;
          let failIndexs = failList.map((item) => item.rowIndex);
          let failInfo = `第${failIndexs.join()}行不符合上传要求，请检查后再次尝试`;
          this.$set(this.data, "failInfo", failInfo);
          this.$emit("confirm");
        }
      });
    },
    uploadFile(file) {
      this.data = null;
      this.formData = new FormData();
      this.formData.append("files", file.file);
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.down-text {
  display: inline-block;
  color: $themeColor;
  margin-top: 10px;
}
</style>
